<template>
    <show-modal :title="title" :loading="loading" width="500px" @cancel="cancel" @submit="submit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            <a-form-model-item label="用户名" prop="userName">
                <a-input v-model.trim="form.userName" :disabled="form.userId?true:false" placeholder="请填写用户名" />
            </a-form-model-item>
            <a-form-model-item label="手机号" prop="telephone">
                <a-input v-model.trim="form.telephone" placeholder="请填写手机号" :maxLength="11" />
            </a-form-model-item>
            <a-form-model-item label="邮箱" prop="email">
                <a-input v-model.trim="form.email" placeholder="请填写邮箱(用于找回密码)"/>
            </a-form-model-item>
            <a-form-model-item label="角色" prop="roleName">
                <a-select v-model="form.roleName" showSearch placeholder="请选择角色" :disabled="accountInfo.userId==form.userId?true:false">
                    <a-select-option :value="item.roleName" v-for="item in roleList" :key="item.roleId">{{item.roleName}}</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="部门" prop="deptName">
                <a-select v-model="form.deptName" showSearch placeholder="请选择部门">
                    <a-select-option :value="item.deptName" v-for="item in deptList" :key="item.deptId">{{item.deptName}}</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="初始密码" prop="userPassword" v-if="!form.userId">
                <a-input v-model.trim="form.userPassword" disabled placeholder="请填写用户登录密码" type="text" />
            </a-form-model-item>

            <a-form-model-item label="状态">
                <a-switch :checked="form.status == 1 ? true : false" @change="onChangeShow" />
            </a-form-model-item>
        </a-form-model>
    </show-modal>
</template>

<script>
import { rules } from './rules';
import { addInfo, updateInfo } from '@/api/system/user';
import deptApi from '@/api/system/dept';
import roleApi from '@/api/system/role';
import { mapState } from 'vuex';
import { getCache } from '@/utils/session';

export default {
    name: 'UserInfo',
    props: {
        info: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            loading: false,
            rules,
            title: '用户信息',
            form: {
                userName: '',
                userPassword:'123456',
                telephone:'',
                email:'',
                roleName:undefined,
                deptName:undefined,
                status: 1
            },
            layout: {
                labelCol: { span: 4 },
                wrapperCol: { span: 20 }
            },
            deptList:[],
            roleList:[]
        };
    },
    computed: {
        ...mapState({
            accountInfo: state => state.user.accountInfo
        })
    },
    created() {
        this.getResource();
        this.form = { ...this.form, ...this.info}
    },
    methods: {
        submit() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        let res = null;
                        this.loading = true;
                        if (this.form.userId) {
                            delete this.form.userPassword;
                            res = await updateInfo(this.form);
                        } else {
                            res = await addInfo(this.form);
                        }
                        if(res.code==200){
                            this.$message.success('操作成功!');
                            if(this.accountInfo.userId==this.form.userId){
                                this.$store.dispatch('user/logout');
                                let tenant = getCache('tenant') || 'master';
                                this.$router.replace({
                                    path: `/${tenant}/login`
                                });
                            }else{
                                this.$emit('submit');
                            }
                        }
                    } finally {
                        this.loading = false
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //切换状态
        onChangeShow(checked) {
            if (checked) {
                this.form.status = 1;
            } else {
                this.form.status = 0;
            }
        },
        //取消
        cancel() {
            this.$emit('cancel');
        },
        //获取资源列表信息
        async getResource(){
            let deptResult = await deptApi.remoteList({page:1,size:1000});
            let roleResult = await roleApi.remoteList({page:1,size:1000});
            this.deptList = deptResult.data.list;
            this.roleList = roleResult.data.list;
        },
        //数组去重
        uniqueArray(data) {
            let map = new Map();
            let array = new Array(); // 数组用于返回结果
            for (let i = 0; i < data.length; i++) {
                if (map.has(data[i].areaCode)) {
                    // 如果有该key值
                    map.set(data[i].areaCode, true);
                } else {
                    map.set(data[i].areaCode, true); // 如果没有该key值
                    array.push(data[i]);
                }
            }
            return array;
        }
    }
};
</script>

<style lang="scss" scoped>
.tree_box {
    display: flex;
    align-items: center;
    .select {
        margin: 0 10px;
        width: 580px;
    }
}
.area_box {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-bottom: 10px;
    .area_item {
        font-size: 14px;
        color: #666;
        margin-left: 15px;
        line-height: 2;
        .close {
            margin-left: 5px;
            color: #ff4d4f;
        }
    }
}
</style>
